{% extends "base.html" %}

{% block page_title %}设备管理{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="fas fa-desktop"></i> 网络设备管理</h2>
    <a href="{{ url_for('add_device') }}" class="btn btn-primary">
        <i class="fas fa-plus"></i> 添加设备
    </a>
</div>

<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead class="table-dark">
                    <tr>
                        <th>ID</th>
                        <th>设备名称</th>
                        <th>IP地址</th>
                        <th>设备类型</th>
                        <th>状态</th>
                        <th>最后检查</th>
                        <th>描述</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for device in devices %}
                    <tr>
                        <td>{{ device.id }}</td>
                        <td>
                            <strong>{{ device.name }}</strong>
                        </td>
                        <td>
                            <code>{{ device.ip_address }}</code>
                        </td>
                        <td>
                            <span class="badge bg-secondary">
                                {% if device.device_type == 'router' %}
                                    <i class="fas fa-wifi"></i> 路由器
                                {% elif device.device_type == 'switch' %}
                                    <i class="fas fa-sitemap"></i> 交换机
                                {% elif device.device_type == 'server' %}
                                    <i class="fas fa-server"></i> 服务器
                                {% elif device.device_type == 'workstation' %}
                                    <i class="fas fa-desktop"></i> 工作站
                                {% elif device.device_type == 'printer' %}
                                    <i class="fas fa-print"></i> 打印机
                                {% else %}
                                    <i class="fas fa-cog"></i> 其他
                                {% endif %}
                            </span>
                        </td>
                        <td>
                            <span class="badge 
                                {% if device.status == 'online' %}bg-success
                                {% elif device.status == 'offline' %}bg-danger
                                {% else %}bg-secondary
                                {% endif %}">
                                {% if device.status == 'online' %}
                                    <i class="fas fa-check-circle"></i> 在线
                                {% elif device.status == 'offline' %}
                                    <i class="fas fa-times-circle"></i> 离线
                                {% else %}
                                    <i class="fas fa-question-circle"></i> 未知
                                {% endif %}
                            </span>
                        </td>
                        <td>
                            {% if device.last_check %}
                                <small class="text-muted">
                                    {{ device.last_check.strftime('%Y-%m-%d %H:%M:%S') }}
                                </small>
                            {% else %}
                                <small class="text-muted">未检查</small>
                            {% endif %}
                        </td>
                        <td>
                            {% if device.description %}
                                <small>{{ device.description[:50] }}{% if device.description|length > 50 %}...{% endif %}</small>
                            {% else %}
                                <small class="text-muted">无描述</small>
                            {% endif %}
                        </td>
                        <td>
                            <div class="btn-group" role="group">
                                <button class="btn btn-sm btn-outline-primary" 
                                        onclick="checkDevice({{ device.id }})"
                                        title="检查状态">
                                    <i class="fas fa-sync"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-info" 
                                        onclick="showDeviceInfo({{ device.id }})"
                                        title="查看详情">
                                    <i class="fas fa-info"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-danger" 
                                        onclick="deleteDevice({{ device.id }})"
                                        title="删除设备">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        
        {% if not devices %}
        <div class="text-center py-5">
            <i class="fas fa-desktop fa-3x text-muted mb-3"></i>
            <h5 class="text-muted">暂无设备</h5>
            <p class="text-muted">点击上方"添加设备"按钮开始添加网络设备</p>
        </div>
        {% endif %}
    </div>
</div>

<!-- 设备详情模态框 -->
<div class="modal fade" id="deviceInfoModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">设备详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="deviceInfoContent">
                <!-- 设备信息将在这里动态加载 -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// 检查设备状态
function checkDevice(deviceId) {
    const button = event.target.closest('button');
    const icon = button.querySelector('i');
    
    // 显示加载状态
    icon.className = 'fas fa-spinner fa-spin';
    button.disabled = true;
    
    fetch(`/api/device_status/${deviceId}`)
        .then(response => response.json())
        .then(data => {
            // 恢复按钮状态
            icon.className = 'fas fa-sync';
            button.disabled = false;
            
            // 刷新页面显示最新状态
            location.reload();
        })
        .catch(error => {
            console.error('Error:', error);
            icon.className = 'fas fa-sync';
            button.disabled = false;
            alert('检查设备状态失败');
        });
}

// 显示设备详情
function showDeviceInfo(deviceId) {
    // 这里可以添加获取设备详细信息的API调用
    const modal = new bootstrap.Modal(document.getElementById('deviceInfoModal'));
    document.getElementById('deviceInfoContent').innerHTML = `
        <div class="text-center">
            <i class="fas fa-spinner fa-spin fa-2x"></i>
            <p class="mt-2">加载设备信息中...</p>
        </div>
    `;
    modal.show();
    
    // 模拟加载设备信息
    setTimeout(() => {
        document.getElementById('deviceInfoContent').innerHTML = `
            <div class="row">
                <div class="col-6">
                    <strong>设备ID:</strong> ${deviceId}
                </div>
                <div class="col-6">
                    <strong>状态:</strong> <span class="badge bg-success">在线</span>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-12">
                    <strong>详细信息:</strong>
                    <p class="mt-2">这是一个示例设备，实际应用中会显示真实的设备信息。</p>
                </div>
            </div>
        `;
    }, 1000);
}

// 删除设备
function deleteDevice(deviceId) {
    if (confirm('确定要删除这个设备吗？此操作不可撤销。')) {
        // 这里应该添加删除设备的API调用
        alert('删除功能需要后端API支持');
    }
}

// 批量检查所有设备状态
function checkAllDevices() {
    const checkButtons = document.querySelectorAll('button[onclick*="checkDevice"]');
    checkButtons.forEach(button => {
        button.click();
    });
}
</script>
{% endblock %}
